<template>
  <div>
    <div class="top  df">
      <div class="top-left ">
        <ul>
          <li><h1>5.0</h1></li>
          <li><h2>综合评分</h2></li>
          <li><h4>高于周边商家69%</h4></li>
        </ul>
      </div>
      <div class="hx"><h1>-------------</h1></div>
      <div class="top-right ">
        <ul>
          <li>
            服务质量 &nbsp;&nbsp;&nbsp;<van-rate
              v-model="value"
              allow-half
              void-icon="star"
              void-color="#eee"
            />{{ value }}
          </li>
          <li>
            服务质量 &nbsp;&nbsp;&nbsp;<van-rate
              v-model="value"
              allow-half
              void-icon="star"
              void-color="#eee"
            />{{ value }}
          </li>
          <li>送达时间 &nbsp;&nbsp;&nbsp;20分钟</li>
        </ul>
      </div>
    </div>
    <div class="main ">
      <van-tabs type="card" @click="onClick">
        <van-tab :title="`全部${rateList.length}`">
          <ul>
            <li v-for="(v, i) in rateList" :key="i">
              <div class="df">
                <img :src="v.avatar" alt="" />
                <div>
                  <p>
                    {{
                      v.username
                    }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
                      v.rateTime | datex
                    }}
                  </p>
                  <p>
                    <van-rate
                      v-model="v.score"
                      allow-half
                      void-icon="star"
                      void-color="#eee"
                    />{{ v.deliveryTime }} 分钟内到达
                  </p>
                  <p>{{ v.text }}</p>

                  <p>
                    <span v-for="x in v.recommend" :key="x"
                      ><van-tag plain type="primary">{{ x }}</van-tag
                      >&nbsp;&nbsp;</span
                    >
                  </p>
                </div>
              </div>
            </li>
          </ul>
        </van-tab>
        <van-tab :title="`满意${goodRateList.length}`"></van-tab>
        <van-tab :title="`不满意${badRateList.length}`"></van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      value: 2.5,
    };
  },
  computed: {
    ...mapState("shop", ["rateList"]),
    ...mapGetters("shop", ["goodRateList", "badRateList"]),
  },
  created() {
    this.$store.dispatch("shop/A_getShopRate");
  },
  methods: {
    onClick(index) {
      console.log("index :>> ", index);
    },
    timestampToTime(timestamp) {
     
    },
  },
  filters: {
    datex(x) {
      let date = new Date(x); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      let h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      let m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      let s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },
  },
};
</script>

<style lang="scss" scoped>
%mainx {
  margin: 20px;
  height: 150px;
  padding: 5px;
  background: #fff;
}
.top {
  height: 200px;
  @extend %mainx;
}
.top-left ul {
  width: 200px;
  h1 {
    color: #ffc200;
  }
  padding: 10px;
  text-align: center;
  li {
    margin: 10px;
    font-size: 15px;
  }
}
.top-right {
  width: 300px;
  padding: 10px;
  li {
    margin: 10px;
  }
}
.hx h1 {
  writing-mode: tb-rl;
}

.main {
  @extend %mainx;
  height: 100%;

  li {
    margin: 10px;
  }
}
img {
  width: 50px;
  height: 50px;
}
</style>